<script setup>
import { ref } from 'vue'

// ref 函数接收一个初始值作为参数，这里传入的是字符串 'Vue.js'，表示 name 这个响应式数据的初始值为 'Vue.js'
const name = ref('Vue.js')

// 函数参数 event：event 是一个 DOM 事件对象，它包含了与触发事件相关的各种信息，
// 例如事件类型、触发事件的元素等。在 Vue 中，当使用 @click 等事件绑定指令时，会自动将原生的 DOM 事件对象传递给对应的处理函数。
function greet(event) {
  // alert(Hello ${name.value}!) 使用模板字符串将 name.value 的值插入到消息中，然后弹出一个警告框显示 “Hello Vue.js!”。这里使用 name.value 来获取 ref 对象的实际值
  alert(`Hello ${name.value}!`)
  // if (event) { alert(event.target.tagName) } 首先检查 event 是否存在（虽然在点击事件触发时 event 肯定存在，但做这样的检查是一种良好的编程习惯）。
  // 如果 event 存在，则通过 event.target 获取触发事件的 DOM 元素，再使用 tagName 属性获取该元素的标签名，并弹出警告框显示该标签名。在这个例子中，触发事件的元素是 <button>，所以会显示 BUTTON。
  if (event) {
    alert(event.target.tagName)
  }
}
</script>

<template>
  <!-- @ 是 v-on 指令的缩写，v-on 用于监听 DOM 事件。@click 表示监听按钮的点击事件，当按钮被点击时，会调用 greet 函数，并将原生的 DOM 事件对象作为参数传递给该函数。 -->
  <button @click="greet">Greet</button>
</template>